/**
 * Created by wei on 17/11/23.
 */


import React, { Component } from 'react';
import axios from 'axios';
import base from '../base.js';
import PropTypes from 'prop-types';
import "./css/publish.css";

class Comment extends  Component{

    constructor(props){
        super(props);
        this.state = {
            errorTip:'',
            click:true,
            value:''
        }
    }

    publish(){
        this.setState({
            click: false,
        });
        const {url, paramsGen} = this.props;

        var params = paramsGen(this.state.value);

        axios.post(url, params)
            .then(response => {
                this.setState({
                    loading:false,
                });
                if (response.data.result == 'SUCCESS') {
                    //刷新
                    this.close();
                }

            })
    }

    close(){
        const {close} = this.props;
        this.setState({
            value:'',
            errorTip:'',
        });
        close();
    }

    onChange(e){
        var value = e.target.value;
        var length = value.length;
        this.setState({
            value: value,
            errorTip: length+"/80",
        });
    }


    render(){
        const {visible} = this.props;

        return (
            <div style={visible ? {display:'block'} : {display:'none'} }>
                <div className="p-sigin-left">
                    <div className="p-signin-form p-clearfix">
                        <input value={this.state.value} ref={this.setValue} className="input_t" onChange={(e)=>this.onChange(e)} type="text" size={100} placeholder="评论内容将出现在左右两侧,80字以内!" />
                    </div>
                    <div className="p-signin-foot p-clearfix" style={{height:'70px'}}>
                        <span style={{fontSize:'12px', color:'red'}}>请勿发表违反国家法律,法规的内容!</span>
                        <span style={{fontSize:'12px', color:'red'}}>&nbsp;&nbsp;&nbsp;{this.state.errorTip}</span>
                        <span><button style={this.state.click ? {float:'right', marginTop:'2px'} : {float:'right', marginTop:'2px', disabled:'disabled'}} className="btn1" onClick={this.publish.bind(this)}>发表</button></span>
                    </div>
                </div>
            </div>
        );
    }

}


Comment.propTypes = {
    visible: PropTypes.bool.isRequired,
    url: PropTypes.string.isRequired,
    paramsGen: PropTypes.func.isRequired,
};

export default Comment;
